<template>
    <div>
        <el-form :inline="true" :model="filterFrom" class="demo-form-inline" size="small">
            <el-form-item label="楼栋" label-width="50px">
                <el-select v-model="filterFrom.sectionId" placeholder="请选择楼栋" size="mini"
                    @change="getList(filterFrom.sectionId)">
                    <el-option v-for="item in sectionList" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="设备名称">
                <el-input v-model="filterFrom.deviceName" placeholder='请输入设备类名称' clearable></el-input>
            </el-form-item>
            <el-form-item label="设备状态">
                <el-select v-model="filterFrom.deviceStat" placeholder="请选择" clearable>
                    <el-option label="在线" :value="1"></el-option>
                    <el-option label="离线" :value="0"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button @click="filterCameraList">查询</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="tableData" style="width:100%">
            <el-table-column label="设备名称" prop="channelName"></el-table-column>
            <el-table-column label="设备类型" prop="cameraType">
                <template slot-scope="scope">
                    <div>
                        {{
                          scope.row.cameraType==1 ? '枪机'
                          : scope.row.cameraType==2 ? '球机'
                          : scope.row.cameraType==3 ? '半球'
                          : scope.row.cameraType==5 ? '本地采集输入' : ''
                      }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="设备状态" prop="stat">
                <template slot-scope="scope">
                    <div>
                        {{scope.row.stat?'在线':'离线'}}
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <div>
                        <el-button type="primary" size="small" @click="playVideo(scope.row)">播放</el-button>
                        <el-button type="success" size="small" @click="addVideo(scope.row)" v-if="!scope.row.flag">
                            添加首页播放
                        </el-button>
                        <el-button type="warning" size="small" @click="delVideo(scope.row)" v-if="scope.row.flag">移除首页播放
                        </el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog :title="videoInfo.channelName" :visible.sync="dialogVisible" width="60%" :before-close="handleClose">
            <video id="my_video" class="video-js vjs-default-skin vjs-big-play-centered vjs-fluid" data-setup="{}"
                controls muted autoplay="true" preload="../assets/images/play.png">
                <source :src="videoInfo.src" type="application/x-mpegURL" />
            </video>
        </el-dialog>
    </div>
</template>

<script>
import {
    getCameraDevInfo,
    getCameraList,
    addHomeVideo,
    getHomeVideo,
    delHomeVideo,
    refreshVideo,
} from '../../url/api';
export default {
    data() {
        return {
            filterFrom: {
                deviceStat: '',
                deviceName: '',
            },
            searchForm: {},
            sectionList: [],
            sectionId: '',
            tableData: [],
            cloneData: [], //保存tableData的数据   用来筛选
            dialogVisible: false, //播放弹框
            videoInfo: {
                src: '',
                // type: 'application/x-mpegURL',
                channelName: '',
            }, //播放的对象
            homeVideoList: [], //首页播放列表
            spaceType: 1,
        };
    },
    methods: {
        filterCameraList() {
            console.log('query');
            let { deviceName, deviceStat } = this.filterFrom;
            if (!deviceStat && !deviceName) {
                this.tableData = this.cloneData;
                return;
            }
            if (deviceStat) {
                this.tableData.map((item) => {
                    if (item.stat == deviceStat) {
                        return item;
                    }
                });
            }
            if (deviceName) {
                this.tableData = this.tableData.filter((item) => {
                    if (item.channelName.indexOf(deviceName) > -1) {
                        return item;
                    }
                });
            }
        },
        //刷新视频回调
        /* videoGoBack() {
            refreshVideo().then((res) => {
                this.$message.success('刷新成功');
            });
        }, */
        // 移除首页播放
        delVideo(row) {
            let id = this.getHomeVideoId(row);
            if (!id) {
                this.$message.error('没找到此id');
                return;
            }
            delHomeVideo(id).then((res) => {
                if (res.data.ok) {
                    this.$message.success('移除成功');
                    this.getList(this.sectionId);
                }
            });
        },
        // 添加首页播放
        addVideo(row) {
            delete row.flag;
            if (this.getHomeVideoId(row)) {
                this.$message.info('请勿重复添加！');
                return;
            }
            row.deviceCode = this.sectionId;
            addHomeVideo(row).then((res) => {
                if (res.data.ok) {
                    this.$message.success('添加成功');
                    this.getList(this.sectionId);
                }
            });
        },
        // 获取首页播放监控的id
        getHomeVideoId(row) {
            this.homeVideoList.forEach((item) => {
                if (
                    row.channelSeq == item.channelSeq &&
                    this.sectionId == item.deviceCode
                ) {
                    return item.id;
                }
            });
            return false;
        },
        /* 单独播放 */
        playVideo(row) {
            if (!row.stat) {
                this.$message.warning('设备已离线');
                return;
            }
            // this.videoInfo.src = row.src;
            this.videoInfo.src = `http://10.201.2.8:7086/live/cameraid/${this.sectionId}%24${row.channelSeq}/substream/1.m3u8`;
            this.videoInfo.channelName = row.channelName;
            this.dialogVisible = true;
            this.myPlay(this.videoInfo.src);
        },
        myPlay(src) {
            this.$nextTick(() => {
                let dom = document.getElementById('my_video');
                videojs(dom).src([
                    {
                        src: src,
                        type: 'application/x-mpegURL',
                    },
                ]);
                videojs(dom, { autoplay: true }, function () {
                    this.play();
                });
            });
        },
        handleClose(done) {
            this.videoInfo.src = '';
            this.videoInfo.channelName = '';
            // videojs('my_video').dispose();
            this.dialogVisible = false;
            done();
        },
        getData(val) {
            this.spaceType = val.spaceType;
        },
        getList(id) {
            getCameraDevInfo(id).then((res) => {
                if (res.data.ok) {
                    this.tableData = this.addPrototype(
                        res.data.data.units[0].channels
                    );
                    this.cloneData = this.tableData;
                    this.$forceUpdate();
                }
            });

            // this.cloneData = this.tableData
            console.log('tableData', this.tableData);
        },
        /* 根据channelSeq 和 deviceCode判断是否存在，有flag=1，无flag=0 */
        addPrototype(arr) {
            if (arr && arr.length) {
                if (!this.homeVideoList.length) {
                    arr.map((item, index) => {
                        // this.$set(arr[index], 'flag', 1);
                        item.flag = true;
                        return item;
                    });
                    return arr;
                }
                arr.map((item, index) => {
                    this.homeVideoList.map((item1) => {
                        if (
                            item1.channelSeq == item.channelSeq &&
                            this.sectionId == item1.deviceCode
                        ) {
                            item.flag = true;
                        } else {
                            item.flag = false;
                        }
                        return item;
                    });
                });
                return arr;
            }
        },
        getHomeVideoList() {
            getHomeVideo().then((res) => {
                if (res.data.ok) {
                    this.homeVideoList = res.data.data;
                }
            });
        },
    },
    mounted() {
        this.getHomeVideoList();
        getCameraList().then((res) => {
            if (res.data.ok) {
                this.sectionList = res.data.data;
                // this.sectionList = this.Mock.mock({
                //     'array|10-30':{
                //         'id|+1':1000034,
                //         'name':'@ctitle'
                //     }
                // })
                this.sectionId = this.sectionList[0].id;
                setTimeout(() => {
                    console.log('初始胡已查询');
                    this.getList(this.sectionList[0].id);
                }, 0);
            }
        });

        // refreshVideo();
    },
};
</script>

<style lang='scss' scoped>
.cameraTable {
    overflow-y: scroll;
}
.cameraTable::-webkit-scrollbar {
    width: 0;
}
.h100 /deep/ .el-form-item__content {
    vertical-align: middle;
}
.video_layout {
    width: 100%;
    position: absolute;
    top: 70px;
    bottom: 0;
    & > div {
        display: inline-block;
        width: 46%;
        height: 46%;
        border: 1px solid #1f807f;
        margin: 10px 30px;
        text-align: center;
        line-height: 20;
        background: rgb(122, 122, 122);
    }
}
</style>
